<!-- 菜单权限 -->
<template>
  <div style="height: 750px; overflow: auto;" class="q-pa-md bg-white">
    <q-markup-table flat class="relative-position" style="width: 500px;">
      <thead>
        <th class="text-center">
          <q-checkbox dense v-model="selectS" @update:model-value="selectAll" />
        </th>
        <th class="text-center">
          一级菜单
          <q-icon class="cursor-pointer" size="18px" :name="descending ? 'expand_less' : 'expand_more'"
            @click="handlerSort" />
        </th>
        <th class="text-center">二级菜单</th>
        <th class="text-center">三级菜单</th>
        <th class="text-center">四级菜单</th>
      </thead>
      <tbody>
        <div v-if="loading">
          <q-inner-loading showing color="grey" />
        </div>
        <tr v-for="row in dataList" :key="row.id">
          <td class="text-center">
            <q-checkbox dense v-model="row.select" @update:model-value="changeItemChecked(row)" />
          </td>
          <td class="text-center">{{ row.parent_id ? '' : row.name }}</td>
          <td class="text-center">{{ row.parent_id && row.url == '' ? row.name : '' }}</td>
          <td class="text-center">{{ threeName(row) }}</td>
          <td class="text-center">{{ foreName(row) }}</td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { gainRolesPermission, updateRolesPermission } from 'src/api/permission'
export default {
  data() {
    return {
      loading: false,
      selectS: false,
      dataList: [],
      descending: false,
      str: ''
    };
  },

  components: {},

  computed: {
    ...mapGetters(['roleId'])
  },
  watch: {
    roleId: {
      immediate: true,
      handler(val) {
        if (!val || val === -1) {
          this.dataList = []
          this.selectS = false
          return
        }
        this.getMenu()
      }
    }
  },

  mounted() { },

  methods: {
    // 三级菜单
    threeName(row) {
      if (row.parent_id && row.url != '') {
        let str = row.value + ''
        let newStr = str.substr(str.length - 1, 1)
        if (newStr == 0) {
          return row.name
        }
      }
    },
    // 四级菜单
    foreName(row) {
      if (row.parent_id && row.url != '') {
        let str = row.value + ''
        let newStr = str.substr(str.length - 1, 1)
        if (newStr != 0) {
          return row.name
        }
      }
    },
    // 获取菜单权限
    getMenu() {
      if (this.roleId === -1 || !this.roleId) {
        this.dataList = []
        return
      }
      const _query = {}
      _query.role_id = this.roleId
      _query.type = 1
      gainRolesPermission(_query).then(res => {
        const { status, data } = res
        if (status === 200) {
          this.dataList = data.concat([])
          if (this.dataList.every(item => item.select)) {
            this.selectS = true
          } else {
            this.selectS = false
          }
        }
      })
    },
    // 修改权限
    changeItemChecked(row) {
      const _query = {}
      _query.role_id = this.roleId
      _query.type = 1
      _query.select = row.select
      var str = row.value + ''
      let a = str.substr(0, 1)
      this.str = a
      let newStr = str.substr(2, 1)
      let five = str.substr(4, 1)
      let last = str.charAt(str.length - 1)
      if (last != 0) {
        updateRolesPermission(row.id, _query).then(res => {
          const { status, data } = res
          if (status === 200) {
            this.getMenu()
            this.$q.notify({
              position: 'top',
              type: 'positive',
              message: '修改成功！'
            })
          }
        })
      } else {
        if (newStr == 0) {
          let arr = []
          this.dataList.map(item => {
            let b = item.value + ''
            let c = b.substr(0, 1)
            if (a == c) {
              arr.push(item)
            }
          })
          arr.map((item, i) => {
            updateRolesPermission(item.id, _query).then(res => {
              const { status, data } = res
              if (status === 200 && i == arr.length - 1) {
                this.getMenu()
                this.$q.notify({
                  position: 'top',
                  type: 'positive',
                  message: '修改成功！'
                })
              }
            })
          })
        } else if (five != 0) {
          let arr = []
          this.dataList.map(item => {
            let b = item.value + ''
            let c = b.substr(0, 1)
            let d = b.substr(2, 1)
            let e = b.substr(4, 1)
            if (a == c && newStr == d && five == e) {
              arr.push(item)
            }
          })
          arr.map((item, i) => {
            updateRolesPermission(item.id, _query).then(res => {
              const { status, data } = res
              if (status === 200 && i == arr.length - 1) {
                this.getMenu()
                this.$q.notify({
                  position: 'top',
                  type: 'positive',
                  message: '修改成功！'
                })
              }
            })
          })
        } else {
          let arr = []
          this.dataList.map(item => {
            let b = item.value + ''
            let c = b.substr(0, 1)
            let d = b.substr(2, 1)
            if (a == c && newStr == d) {
              arr.push(item)
            }
          })
          arr.map((item, i) => {
            updateRolesPermission(item.id, _query).then(res => {
              const { status, data } = res
              if (status === 200 && i == arr.length - 1) {
                this.getMenu()
                this.$q.notify({
                  position: 'top',
                  type: 'positive',
                  message: '修改成功！'
                })
              }
            })
          })
        }
      }
    },
    // 全选
    selectAll() {
      if (this.selectS) {
        this.dataList.forEach((item, index) => {
          if (!item.select) {
            const _query = {}
            _query.role_id = this.roleId
            _query.type = 1
            _query.select = true
            updateRolesPermission(item.id, _query).then(res => {
              if (index === this.dataList.length - 1) {
                this.getMenu()
                this.$q.notify({
                  position: 'top',
                  type: 'positive',
                  message: '修改成功！'
                })
              }
            })
          }
        })
      } else {
        this.dataList.forEach((item, index) => {
          if (item.select) {
            const _query = {}
            _query.role_id = this.roleId
            _query.type = 1
            _query.select = false
            updateRolesPermission(item.id, _query).then(res => {
              if (index === this.dataList.length - 1) {
                this.getMenu()
                this.$q.notify({
                  position: 'top',
                  type: 'positive',
                  message: '修改成功！'
                })
              }
            })
          }
        })
      }
    },
    /**
     * 排序
     */
    handlerSort() {
      this.descending = !this.descending
      this.dataList.reverse()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
